<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar title="商品搜索" :left-arrow="true" @click-left="$router.back()" />

    <!-- 搜索框 -->
    <van-search v-model="searchContent" background="#fff" show-action placeholder="请输入您搜索的商品">
      <template v-slot:action>
        <div class="search-btn" @click="searchClick(searchContent)">搜索</div>
      </template>
    </van-search>

    <!-- 搜索历史 -->
    <div v-if="list.length">

      <div class="title">
        <span>最近搜索</span>
        <img src="@/assets/delete_search.png" @click="deleteAll">
      </div>

      <div class="list-content">
        <div  v-for="item in list" :key="item" class="list-item" @click="searchClick(item)">{{ item }}</div>
      </div>
    </div>



  </div>
</template>

<script>
import { deleteSearchList, getSearchList, setSearchList } from '@/utils/storage';

export default {
  name: 'search',
  data(){
    return {
      list: getSearchList(),
      searchContent:''
    }
  },
  methods: {
    searchClick(value) {

      if(value == undefined || value.trim().length == 0) return

      // 判断数组里面是否有了
      if(this.list.includes(value)) {
        const index = this.list.indexOf(value) 
        console.log(index)
        this.list.splice(index, 1)
      }
      this.list.unshift(value)

      setSearchList(this.list)

      // 跳转到搜索列表页
      this.$router.push(`/searchList?search=${value}`)

    },
    deleteAll(){
      
    this.list = []
      deleteSearchList()
    }
  }
}
</script>

<style lang="less" scoped>
.container {

  background-color: #f5f5f5;
  // height: 100%;
  min-height: 100vh;

  .van-search__action {
    padding: 0px;

    @search-content-background-color: red
  }

  .search-btn {
    width: 50px;
    background-color: red;
    color: white;
    text-align: center;
    font-size: 13px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: 10px;
  }

  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    margin: 10px 0px;


    img {
      width: 15px;
      height: 15px;
    }
  }

  .list-content {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0px 15px;
  }

  .list-item {
    // width: 30%;
    flex: 0 0 33%;
    padding: 5px 5px;
    margin-bottom: 10px;
    text-align: center;
    text-overflow: ellipsis;
    background-color: #fff;
    font-size: 13px;
    border: 1px solid #eee;
    border-radius: 50px;
    // height: 30px;
    // line-height: 30px;
    overflow: hidden;
  }


}
</style>